<template>
	<!-- 持仓 -->
	<view class="wrap">
		<!-- v-if="openInfo && openInfo.status==='1'" -->
		<view class="wrap__main" v-if="isShowOpen">
			<view class="main__title">
				<view class="main__title_left">{{ $t("trade.title") }}</view>
				<view class="main__title_right">
					<!-- <image src="@/static/icons/clock_icon.png" mode="widthFix" class="header__icon" @click="navTo"></image> -->
				</view>
			</view>

			<view class="main__nav">
				<view :class="['nav__item', areaIndex === index ? 'nav__item--active' : '']" @click="areaClick(index)"
					v-for="(item, index) in areaList" :key="index">
					<text class="item__title">{{ item.name }}</text>
					<text class="item__line"></text>
				</view>
			</view>
			<!-- 账户信息 -->
			<tradeAccount :areaName="areaName" :propertyInfo="propertyInfo"></tradeAccount>
			<view class="main__menu">
				<view class="menu__item" v-for="(item, index) in menuList" :key="index" @click="menuClick(item)">
					<view class="odj">
					<image :src="item.icon" mode="widthFix" class="item__icon"></image>
					</view>
					
					<text class="item__title">{{ item.title }}</text>
				</view>
			</view>
			<view class="rank__nav">
				<view :class="['nav__item', navIndex === index ? 'nav__item--active' : '']" v-for="(item, index) in navList"
					:key="index" @click="navClick(index)">
					<text class="item__title">{{ item }}</text>
					<text class="item__line"></text>
				</view>
			</view>
			<!-- 持仓记录 -->
			<tradeRecords v-if="navIndex == 0" :posRecords="posRecords"></tradeRecords>
			<tradeRecord v-if="navIndex == 1" :recordsList="recordsList"></tradeRecord>
		</view>
		<!-- 未開戶 -->
		<emptyTrade :openInfo="openInfo" v-else></emptyTrade>
	</view>
</template>

<script>
import tradeRecord from '@/pages/trade/tradeRecord.vue'
import tradeRecords from '@/components/trade/tradeRecords.vue'
import tradeAccount from '@/components/trade/tradeAccount.vue'
import emptyTrade from '@/components/trade/emptyTrade.vue'
export default {
	components: {
		emptyTrade,
		tradeRecords,
		tradeAccount,
		tradeRecord
	},
	data() {
		return {
			areaList: [], //地区分类
			areaIndex: 0, //导航索引
			menuList: [
				{ title: this.$t('trade.buy'), icon: require('@/static/icons/buy_icon.png'), url: "/pages/trade/cashBuy" },
				{ title: this.$t('trade.withdraw'), icon: require('@/static/icons/pickup_icon.png'), url: "/pages/trade/pickCash" },
				{ title: this.$t('trade.exchange'), icon: require('@/static/icons/exchange_icon.png'), url: "/pages/trade/cashExchange" },
				{ title: this.$t('trade.tradeHis'), icon: require('@/static/icons/trade_icon.png') , url: "/pages/trade/tradeHistory" },
				{ title: this.$t('trade.cashHis'), icon: require('@/static/icons/records_icon.png'), url: "/pages/trade/cashHistory" },
			],
			openInfo: {}, //开户信息
			propertyInfo: {}, //资金信息
			posRecords: [], //持仓列表
			recordsList: [],
			isShowOpen: true,
			navList: [this.$t('trade.hold'), this.$t('trade.history')],
			navIndex: 0,
			classify_id: 1,
			type: 1,
		}
	},
	computed: {
		// 地区信息
		areaName() {
			let { areaList, areaIndex } = this
			let res = ""
			if (areaList.length) {
				let { name = '', file = '' } = areaList[areaIndex]
				res = `${name}·${file}`
			}
			return res
		}
	},
	onHide() {
		
			clearInterval(this.timerdetail)
	},
	
	async onShow() {
		// 是否登录
		let token = uni.getStorageSync("token")
		if (!token) {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		} else {
			// 获取地区分類
			await this.getAreaCate()
			// 获取用户开户信息
			await this.getUserOpenInfo()
			// 获取持仓数据
			if (this.openInfo) { //存在开户信息
				this.getPosRecords()
			}
			
			
			this.timerdetail = setInterval(()=>{
					this.getPosRecords()
			}, 10000)
			
		
			this.indexTimerId = setInterval(()=>{
				// 获取地区分類
				//  this.getAreaCate()
				// // 获取用户开户信息
				//  this.getUserOpenInfo()
				// // 获取持仓数据
				// if (this.openInfo) { //存在开户信息
				 //	this.getPosRecords()
				// }
			}, 10000)
		}
		
	},
	methods: {
		async getApplyRecords() {
			uni.showLoading({
				title: this.$t('loading.loading'),
				icon: 'none'
			})
			let { id } = this.areaList[this.areaIndex]
			let res = await this.$api.getChiCangApply(id, this.type)
			if (res && res.code === 1 && res.data) {
				uni.hideLoading()
				this.recordsList = res.data.list.data
			}
		},
		navClick(index) {
			if (this.navIndex !== index) {
				this.navIndex = index
			}
			console.log(this.navIndex)
			if (this.navIndex == 1) {
				this.getApplyRecords()
			}
			if (this.navIndex == 0) {
				this.getPosRecords()
			}
		},
		navTo() {
			uni.navigateTo({
				url: "/pages/trade/tradeRecord"
			})
		},
		// 获取持仓数据
		async getPosRecords() {
			let { id } = this.areaList[this.areaIndex]
			let res = await this.$api.getPosRecords(id)
			if (res.code === 1 && res.data) {
				let { info = {}, list = {} } = res.data
				this.propertyInfo = info
				// console.log("持仓数据", list.data[0])
				this.posRecords = list.data || []
			}
		},
		// 獲取地区分類
		async getAreaCate() {
			let res = await this.$api.getAreaCate()
			if (res.code === 1 && res.data) {
				// console.log("地区分类", res.data)
				this.areaList = res.data
			}
		},
		// 获取用户开户信息
		async getUserOpenInfo() {
			let res = await this.$api.getUserOpenInfo()
			// -1 没有数据
			const status = Number(res?.data?.status ?? -1)

			if (res.code === 1) {
				this.openInfo = res?.data ?? {}
				if ([-1, 0, 2].includes(status)) {
					this.isShowOpen = false
				} else {
					this.isShowOpen = true
				}
			} else {
				// 请求错误
				this.isShowOpen = true
			}
		},
		// 菜單點擊
		menuClick({ url }) {
			let { id } = this.areaList[this.areaIndex]
			let params = `?id=${id}`
			let pageUrl = url.includes("cashBuy") ? url + params : url
			console.log(pageUrl)
			let nexPageUel = url.includes("pickCash") ? url + params : url
			uni.navigateTo({
				url: pageUrl
			})
			uni.navigateTo({
				url: nexPageUel
			})
		},
		// 地区切换
		areaClick(index) {
			this.classify_id = this.areaIndex
			if (this.areaIndex !== index) {
				this.areaIndex = index
				this.getPosRecords()
				this.getApplyRecords()
			}
			localStorage.setItem('areaNum', this.areaIndex)
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	/* min-height: 100vh; */
	padding: 0 30rpx;
	padding-top: 50rpx;
	box-sizing: border-box;

	&__main {
		.main__title {
			width: 100%;
			height: 80rpx;
			font-size: 46rpx;
			font-weight: bold;
			display: flex;
			color: #fff;

			.main__title_left {
				flex: 0.5;
				line-height: 80rpx;
			}

			.main__title_right {
				flex: 0.5;
				display: flex;
				justify-content: right;
				align-items: center;

				.header__icon {
					width: 42rpx;
					height: 42rpx;

				}
			}
		}

		.main__nav {
			margin-top: 40rpx;
			@include flexRowAlign();

			.nav__item {
				margin-right: 90rpx;
				@include flexCenter(column);

				.item__title {
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}

				.item__line {
					width: 30rpx;
					height: 4rpx;
					background: transparent;
					border-radius: 2rpx;
					margin-top: 4rpx;
				}
			}

			.nav__item--active {
				.item__title {
					color: #458EF4;
				}

				.item__line {
					background: #458EF4;
				}
			}
		}

		.main__menu {
			@include flexRowAlign(space-between);
			margin-top: 50rpx;

			.menu__item {
				@include flexCenter(column);
				width: 20%;
			
			
			 .odj{
				   justify-content: center;
				   align-items: center;
				 
			 }
				

				.item__icon {
					width: 72rpx;
					height: 72rpx;
					
				}

				.item__title {
					font-size: 24rpx;
					font-weight: bold;
					color: #fff;
					margin-top: 16rpx;
					text-align: center;
				}
			}
		}

		.rank__nav {
			margin-top: 60rpx;
			@include flexRowAlign();

			.nav__item {
				flex: 1;
				@include flexCenter(column);

				.item__title {
					font-size: 28rpx;
					font-weight: 800;
					color: #fff;
				}

				.item__line {
					width: 30rpx;
					height: 4rpx;
					background: transparent;
					border-radius: 2rpx;
					margin-top: 6rpx;
				}
			}

			.nav__item--active {
				.item__title {
					color: #458EF4;
				}

				.item__line {
					background: #458EF4;
				}
			}
		}
	}
}
</style>